import Head from 'next/head'
import { Breadcrumb, Row, Col, Affix } from 'antd'
import Link from 'next/link'
import { useState, useEffect } from 'react'
import Advert from '@/components/Advert/Advert'
import Author from '@/components/Author/Author'
import ArticleHeader from '@/components/ArticleHeader/ArticleHeader'
import style from './article.module.scss'
import cN from 'classnames'
import MarkdownNav from 'markdown-navbar'
import 'markdown-navbar/dist/navbar.css'
import { GetServerSideProps } from 'next'
import 'github-markdown-css'
import { marked } from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
import pathUrl from '@/config/url'
import { useRouter } from 'next/router'
import ToToop from '@/components/ToTop/ToTop'
import LikeBtn from '@/components/LikeBtn/LikeBtn'

interface Iprops {
  data: {
    ctx: string
    likeNum: number
    sawNum: number
    date: string
    title: string
    id: number
  }
}

const Article: React.FC<Iprops> = ({ data }) => {
  const image = [
    '/81e852dedea8667476eda726f13872e.jpg',
    '/d80522ad2174544eaf6de8a69afdfd5.jpg',
  ]
  const router = useRouter()
  const [list, setList] = useState(data)
  // marked 配置
  const renderer = new marked.Renderer()

  useEffect(() => {
    const id = list.id.toString()
    const scroll = sessionStorage.getItem(id)
    if (scroll) {
      window.scrollTo(0, Number(scroll))
    }
    return () => {
      sessionStorage.setItem(id, scrollY.toString())
    }
  })

  marked.setOptions({
    renderer: renderer,
    gfm: true,
    pedantic: false,
    sanitize: false,
    // tables: false,
    breaks: false,
    smartLists: true,
    smartypants: false,
    highlight: (code: any) => hljs.highlightAuto(code).value,
  })
  let html = marked(list.ctx)
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <ToToop></ToToop>
      <LikeBtn
        likeNum={list.likeNum}
        id={list.id}
        setList={setList}
        list={list}
      ></LikeBtn>
      <Row justify="center" className="global-main">
        <Col className="global-left" xs={24} sm={24} md={16} lg={18} xl={14}>
          <div className={style.box}>
            <div className={style.header}>
              <Breadcrumb>
                <Breadcrumb.Item>
                  <Link href="/" className={style.item}>
                    首页
                  </Link>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                  <Link
                    href={`/blog/${router.query.type}`}
                    className={style.item}
                  >
                    {router.query.type == 'life' ? '生活' : '文章'}
                  </Link>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                  <span className={style.item}>{list.title}</span>
                </Breadcrumb.Item>
              </Breadcrumb>
            </div>
            <div className={style.article}>
              <div className={style.title}>{list.title}</div>
              <ArticleHeader
                likeNum={list.likeNum}
                sawNum={list.sawNum}
                date={list.date}
              ></ArticleHeader>
              <div
                className={cN([style.ctx, 'markdown-body'])}
                dangerouslySetInnerHTML={{ __html: html }}
              ></div>
            </div>
          </div>
        </Col>
        <Col className="global-right" xs={0} sm={0} md={7} lg={5} xl={4}>
          <div className="global-rightBox">
            <Author></Author>
            {image.map((item, index) => (
              <Advert key={index} src={item}></Advert>
            ))}
            <Affix offsetTop={70} className={style.affix}>
              <div className={style.nav}>
                <div className={style.title}>文章导航</div>
                <MarkdownNav ordered={false} source={list.ctx} />
              </div>
            </Affix>
          </div>
        </Col>
      </Row>
    </>
  )
}

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const res = await fetch(`${pathUrl.articleUrl}${ctx.params?.id}`)
  const props = res.json()
  return {
    props,
  }
}

export default Article
